import { computed, defineComponent, ref, toRef, watch, type PropType } from 'vue'
import { ElButton, ElRadioButton, ElRadioGroup, ElRow, ElSpace } from 'element-plus'
import { E_QUESTION } from '@/types'
import type { IOption, IQuestion } from '@/types'
import styles from './index.module.less'
import { useLocalStor } from '@/hooks'

type OptionMapType = {
    [key: string]: { [key: number]: string };
};

const QUESTION_MAP: { [key: string]: string } = {
    [E_QUESTION.CHECKBOX]: '单选',
    [E_QUESTION.SELECT]: '判断',

}

const OPTION_MAP: OptionMapType = {
    [E_QUESTION.CHECKBOX]: {
        0: 'A',
        1: 'B',
        2: 'C',
        3: 'D',
        4: 'E',
        5: 'F',
    },
    [E_QUESTION.SELECT]: {
        0: 'TRUE',
        1: 'FALSE'
    }
}

export default defineComponent({
    name: 'Card',
    props: {
        question: Object as PropType<IQuestion>
    },
    emits: ['next', 'answer'],
    setup(props, { emit }) {
        const localStore = useLocalStor()
        const errorAnswer = 99999
        const duration = ref()
        const userAnswer = ref()
        const error = computed(() => {
            return hasAnswer() && userAnswer.value !== props.question?.answer
        })
        let countdownStopped = false
        let interval: number

        const startCountdown = () => {
            duration.value = 25

            interval = setInterval(() => {
                if (--duration.value < 0) {
                    setAnswer(errorAnswer)
                }
            }, 1000);
        }

        const stopCountdown = () => {
            countdownStopped = true
            clearTimeout(interval)
        }

        watch(
            () => userAnswer,
            () => stopCountdown(),
        )

        const reset = () => {
            countdownStopped = false
            userAnswer.value = null
        }

        watch(
            () => props.question,
            () => {
                reset()
                startCountdown()
            },
            { immediate: true }
        )

        const setAnswer = (val: number) => {
            if (hasAnswer()) return
            stopCountdown()
            userAnswer.value = val
            emit('answer', val, error.value)
        }



        const renderDescription = () => {
            const { description } = props.question!
            return <div class={styles.cardDesc}>{description}</div>
        }

        const hasAnswer = () => {
            if (userAnswer.value === 0) return true
            return !!userAnswer.value
        }

        const renderOptions = () => {
            const { options, type } = props.question!
            return (
                <div v-model={userAnswer.value}>
                    {options.map((option, index) => {
                        const className = {
                            [styles.cardOption]: true,
                            correct: hasAnswer() && option.value === props.question!.answer,
                            error: error.value && option.value === userAnswer.value
                        }
                        return (
                            <div class={className} onClick={() => setAnswer(option.value)}>
                                {OPTION_MAP[type][index]} {option.label}
                            </div>
                        )
                    })}
                </div>
            )
        }


        const renderStopActions = () => {
            const type = error.value ? 'danger' : 'primary'
            return <ElButton size='large' type={type} onClick={() => emit('next')}>下一题</ElButton>
        }

        const renderAction = () => {
            return (
                <div class={styles.cardAction}>
                    {
                        countdownStopped
                            ? renderStopActions()
                            : <ElButton size='large' type='primary' onClick={() => setAnswer(errorAnswer)}>倒计时 {duration.value}</ElButton>
                    }
                </div>
            )
        }

        return () => {
            return (
                <div class={styles.card}>
                    {renderDescription()}
                    {renderOptions()}
                    {renderAction()}
                </div>
            )
        }
    }
})
